<template>
  <div class="wrap">
    <up-sticky>
      <div style="background: #f2f2f7">
        <div v-if="isServiceProvider" class="flex_sb_cen">
          <Button :type="scheduleType === 'my' ? 'primary' : 'solid'" size="B" @confirm="switchScheduleFn('my')">我创建的日程</Button>
          <Button :type="scheduleType === 'other' ? 'primary' : 'solid'" size="B" @confirm="switchScheduleFn('other')">其他日程</Button>
        </div>
        <div class="mt28 mb28">
          <up-tabs
            :active-style="{fontSize: '32rpx' ,fontWeight: 600}"
            :current="currentIndex"
            :inactive-style="{fontSize: '32rpx'}"
            :item-style="{width: '168rpx', height: '88rpx'}"
            :list="statusList"
            line-color="#1890ff"
            line-height="8rpx"
            line-width="60rpx"
            @click="switchTabFn"
          />
        </div>
      </div>
    </up-sticky>
    <!-- ${storeState.bottomSafeDis}rpx - 108rpx) 为下方按钮的高度-->
    <PAutoList ref="autoListRef" :height="`calc(100vh - 220rpx - ${storeState.bottomSafeDis}rpx - 108rpx)`" :params="params" :request="getActivityScheduleList" @list="scheduleList = $event">
      <template v-for="item in scheduleList" :key="item.id">
        <div class="schedule_list mb24" @tap="Router.push('schedule_details', {id: item.id})">
          <div class="flex_sb_start">
            <div class="schedule_title generate-columns">{{ item.name }}</div>
            <span :style="{color: statusAbout(item.status)?.color}" class="schedule_status">{{ statusAbout(item.status)?.text }}</span>
          </div>
          <div class="schedule_text mt24">
            <Icon name="icon-shijian1" size="22" />
            <span class="ml10">{{ item.beginTimeText }} - {{ item.endTimeText }}</span>
          </div>
          <div class="schedule_text mt16">
            <Icon name="icon-dingwei1" size="24" />
            <span class="ml10">{{ item.province }}-{{ item.city }}</span>
          </div>
        </div>
      </template>
    </PAutoList>
    <div v-if="isServiceProvider" :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button size="L" @confirm="Router.push('editSchedule')">新建日程</Button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Button from '@C/Button.vue'
import { ref, computed, reactive } from 'vue'
import Icon from '@C/Icon.vue'
import { keepBottomSafeDis, Router, storeState } from '@U/common'
import { getActivityScheduleList } from '@P_GL/activitySchedule/request'
import PAutoList from '@C/PAutoList.vue'

const isServiceProvider = computed(() => storeState.zhiKeGrade === 'serviceProvider')
const serviceStatusList = [
  {
    name: '待上传',
    status: 2,
  },
  {
    name: '进行中',
    status: 1,
  },
  {
    name: '待开始',
    status: 0,
  },
  {
    name: '已完成',
    status: 3,
  },
]
const coopStatusList = [
  {
    name: '进行中',
    status: 1,
  },
  {
    name: '待开始',
    status: 0,
  },
  {
    name: '已结束',
    status: 3,
  },
]
const otherStatusList = [
  {
    name: '进行中',
    status: 1,
  },
  {
    name: '待开始',
    status: 0,
  },
  {
    name: '已结束',
    status: 3,
  },
]
const autoListRef = ref()
const scheduleType = ref('my')
const currentIndex = ref(0)
const switchScheduleFn = (type: string) => {
  currentIndex.value = 0
  scheduleType.value = type
  params.status = 1
  if (type === 'my') {
    params.isCreater = true
    if (isServiceProvider.value) params.status = 2
  }
  if (type === 'other') params.isCreater = false
  autoListRef.value.clickGetDataFn()
}
const statusList = computed(() => {
  if (scheduleType.value === 'my') {
    if (isServiceProvider.value) return serviceStatusList
    if (storeState.zhiKeGrade === 'coopProvider') return coopStatusList
  }
  if (scheduleType.value === 'other') return otherStatusList
})
const switchTabFn = (valObj) => {
  currentIndex.value = valObj.index
  params.status = valObj.status
  autoListRef.value.clickGetDataFn()
}
const scheduleList = ref([])
const params = reactive({
  status: isServiceProvider.value ? 2 : 1,
  isCreater: isServiceProvider.value,
})
const statusAbout = computed(() => (status: number) => {
  let obj = {}
  if (status === 0) obj = { text: '待开始', color: '#8183FA' }
  if (status === 1) obj = { text: '进行中', color: '#1890FF' }
  if (status === 2) obj = { text: '待上传', color: '#FF8002' }
  if (status === 3) obj = { text: scheduleType.value === 'my' ? '已完成' : '已结束', color: '#2DC76D' }
  return obj
})
</script>

<style lang="less" scoped>
.wrap {
  padding: 24rpx 24rpx 0;
  .schedule_list {
    border-radius: 24rpx;
    padding: 16rpx 20rpx 20rpx;
    background-color: #fff;
    .schedule_title {
      width: 520rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #262626;
      line-height: 44rpx;
    }
    .schedule_text {
      font-weight: 400;
      font-size: 28rpx;
      color: #8C8C8C;
      line-height: 40rpx;
    }
    .schedule_status {
      font-weight: 500;
      font-size: 28rpx;
      line-height: 40rpx;
    }
  }
}
</style>
